<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>海报生成</title>
		<link rel="stylesheet" type="text/css" href="./static/css/poster.css"/>
		<script src="./static/js/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="./static/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="./static/js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
		<!-- uni 的 SDK -->
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="poster">
				<div class="poster-div">
                    <div class="u-flex u-row-center" style="font-size:14px;color: #ff7e23;margin-bottom: 10px;">点击海报上的文字可进行编辑</div>
					<component ref="mode" :is="data.mode" :data="data"></component>
					<!-- <mode0 :id="`poster-mode0`" :data="data"></mode0>
					<mode1 :id="`poster-mode1`" :data="data"></mode1> -->
					<!-- <component :id="`poster-${item.name}`" :is="item.name" :data="data" v-for="(item, index) in modes" :key="index"></component> -->
				</div>
				<div class="poster-control">
                    <div class="u-flex u-row-center poster-control-more" @click="more = !more">{{ more?'隐藏':'显示' }}更多设置{{ more?'▲':'▼' }}</div>
					<div v-if="more" class="poster-control-item u-flex u-col-top">
						<div class="label u-flex u-col-center">样式</div>
						<div class="items u-flex u-col-top u-flex-wrap">
							<div @click="data.mode = item.name" :class="{active: data.mode == item.name}" class="items-btn" v-for="(item, index) in modes" :key="index">{{ item.label }}</div>
						</div>
					</div>
					<div v-if="more" class="poster-control-item u-flex u-col-top">
						<div class="label u-flex u-col-center">排版</div>
						<div class="items u-flex u-col-top u-flex-wrap">
							<div @click="data.layout = item.name" :class="{active: data.layout == item.name}" class="items-btn" v-for="(item, index) in layouts" :key="index">{{ item.label }}</div>
						</div>
					</div>
					<div v-if="more" class="poster-control-item u-flex u-col-top">
						<div class="label u-flex u-col-center">类型</div>
						<div class="items u-flex u-col-top u-flex-wrap">
							<div @click="data.type = item.name" :class="{active: data.type == item.name}" class="items-btn" v-for="(item, index) in types" :key="index">{{ item.label }}</div>
						</div>
					</div>
					<div class="poster-control-item u-flex u-col-top">
						<div class="label u-flex u-col-center">背景</div>
						<div class="items u-flex u-col-top u-flex-wrap">
							<div @click="data.color = item.name" :class="{active: data.color == item.name}" class="items-btn no-text" v-for="(item, index) in colors" :key="index" :style="{backgroundColor: `${item.name}`}">&nbsp;</div>
							<div v-if="data.mode != 'mode3'" class="items u-flex u-col-top u-flex-wrap">
								<div class="items-btn" @click="choseColor">自定义</div>
							</div>
						</div>
					</div>
					
					<div class="poster-control-btn u-flex u-row-center">
						<div class="btns" @click="save">保存图片</div>
					</div>
				</div>
			</div>
			
			<div class="u-flex u-row-center u-col-center" v-if="viewImg != ''" style="position: fixed;left: 0;top: 0;right:0;bottom:0;;overflow-x: hidden;overflow-y: auto;z-index: 9999;background-color: rgba(0, 0, 0, .7);padding: 10px;">
				<div style="position: absolute;right: 10px;top: 10px;width: 40px;height: 40px;line-height: 40px;font-size: 20px;color: #fff;z-index: 2;text-align: center;border-radius: 100%;background-color: rgba(0, 0, 0, .3);" @click="viewImg = ''">✕</div>
				<img :src="viewImg" alt="" style="max-width: 100%;">
			</div>
		</div>
	</body>
	<script src="./static/js/poster.js" type="text/javascript" charset="utf-8"></script>
</html>
